<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="dianwei">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="点位搜索：">
        <el-input v-model.trim="formInline.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="区域搜索：">
        <el-select v-model.trim="formInline.regionId" placeholder="请选择" >
          <el-option :label="item.region.name" :value="item.region.id" v-for="item in list" :key="item.region.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="dwSearch">搜索</el-button>
        <el-button type="success" icon="el-icon-search" @click="dwReset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="dw-bottom">
      <div class="dw-add">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click.native="newDw"
          >新建</el-button
        >
      </div>
      <!-- 列表区域 -->
      <div class="dw-content">
        <el-table :data="list" style="width: 100%" >
          <el-table-column prop="num" label="序号" width="80" type="index">
          </el-table-column>
          <el-table-column prop="name" label="点位名称" width="175">
          </el-table-column>
          <el-table-column prop="region[name]" label="所在区域" width="175" >
          </el-table-column>
          <el-table-column prop="businessType[name]" label="商圈类型" width="175">
          </el-table-column>
          <el-table-column prop="ownerName" label="合作商" width="175">
          </el-table-column>
          <el-table-column prop="addr" label="详细地址" width="175" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="labor" label="操作" width="200" class="caozuo">
            <template v-slot={row}>
              <span @click="dwXq(row.id)">查看详情</span>
              <span @click="dwXg(row)">修改</span>
              <span @click="delDw(row.id)">删除</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="dw-footer">
          <!-- 页码 -->
          <Page @gengxin='getDw' :total='Number(totalCount)' :totalPage='Number(totalPage)' :page.sync="data.pageIndex"></Page>
        </div>
      </div>
    </div>
    <!-- 新增 与 编辑 -->
    <DwXz :visible.sync='DialogShow'
     :list ='list'
     @gengxin='getDw'
     ref='xz'
     :dwXzList='dwXzList'
    ></DwXz>
    <!-- 点位详情 -->
    <DwXq :xqVisible.sync='xqVisible' :dwXqList='dwXqList'></DwXq>
  </div>
</template>

<script>
import { getDwXq, delFnDw, getDw } from '@/api/dianweiguanli/dianwei'
import Page from './components/Page.vue'
import DwXz from './components/DwXz.vue'
import DwXq from './components/DwXq.vue'
export default {
  components: {
    Page,
    DwXz,
    DwXq
  },
  data () {
    return {
      xqVisible: false,
      DialogShow: false,
      isShow1: true,
      isShow2: false,
      formInline: {
        name: '',
        regionId: ''
      },
      list: [],
      dwXzList: [],
      data: {
        pageIndex: 1,
        pageSize: 10
      },
      totalCount: 0, // 总量
      totalPage: 0, // 总页数
      id: '',
      dwXqList: []
    }
  },
  created () {
    this.getDw()
  },
  mounted () {},
  methods: {
    async getDw () {
      const { data } = await getDw(this.data)
      // console.log('data :>> ', data)
      this.list = JSON.parse(JSON.stringify(data.currentPageRecords))
      this.dwXzList = JSON.parse(JSON.stringify(data.currentPageRecords))
      // 详细地址处理
      this.list.forEach(item => { item.addr = item.addr.split('-').splice(3, 1).join('') })
      this.totalCount = data.totalCount
      this.totalPage = data.totalPage
    },
    // 查询
    async dwSearch () {
      const obj = { ...this.formInline, ...this.data }
      const { data } = await getDw(obj)
      this.list = data.currentPageRecords
      this.formInline = {
        name: '',
        regionId: ''
      }
    },
    // 重置
    dwReset () {
      this.getDw()
    },
    // 新增点位
    newDw () {
      this.DialogShow = true
    },
    // 删除
    async delDw (id) {
      // console.log('id :>> ', id)
      await this.$confirm('确定删除吗？')
      await delFnDw(id)
      this.getDw()
      this.$message.success('删除成功')
    },
    // 点位详情
    async dwXq (id) {
      this.xqVisible = true
      const res = await getDwXq(id)
      this.dwXqList = res.data
      this.dwXqList.forEach(item => {
        item.lastSupplyTime =
      item.lastSupplyTime.replace(/-/g, '.').replace('T', ' ')
      })
    },
    // 点位修改
    dwXg (row) {
      this.DialogShow = true
      this.$refs.xz.xgContent(row)
    }
  }
}
</script>
<style lang="less" scoped>
.dianwei {
  * {
    box-sizing: border-box;
  }
  padding: 80px 20px 20px;
  background-color: #f8fafd;

  .dw-bottom {
    padding-left: 17px;
    padding-top: 20px;
    width: 1185px;
    height: 673px;
    background-color: #fff;
    .dw-add {
      margin-bottom: 20px;
      width: 1153px;
      height: 36px;
      .el-button--primary {
        // display: inline-block;
        cursor: pointer;
        width: 80px;
        height: 36px;
        color: #fff;
        font-size: 14px;
        background-color: #ff6726;
        border-color: #ff6726;
        padding: 0;
      }
    }
    .dw-content {
      /deep/.el-table th {
        background-color: #f3f6fb;
      }
      span {
        margin-right: 10px;
        cursor: pointer;
        font-size: 14px;
        color: #5f84ff;
      }
      span:last-child {
        color: #ff5a5a;
      }
      .dw-footer {
        display: flex;
        justify-content: space-between;
        padding: 32px 16px;
        width: 1153px;
        height: 96px;
        p {
          font-size: 16px;
          color: #606266;
        }
        .btn {
          .btn1,
          .btn2 {
            // display: flex;
            background-color: #d5ddf8;
            width: 70px;
            height: 32px;
            margin: 0 16px;
            padding: 0;
          }
        }
      }
    }
  }
  /deep/.el-dialog {
    position: relative;
    margin: 0 auto 50px;
    background: #fff;
    border-radius: 12px;
    // -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    // box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
    // -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    .el-dialog__title {
      font-size: 18px;
      font-weight: 900;
      color: #333;
    }
    .el-dialog__body {
      padding: 20px 20px 0;
    }
    .el-form-item {
      display: flex;
      align-items: center;

      .el-form-item__content {
        margin-left: 0 !important;
      }
      .el-form-item__label {
        margin-left: 20px;
      }
      .el-input__inner {
        width: 396px;
        height: 36px;
      }
      .el-textarea__inner {
        width: 396px;
        height: 82px;
      }
    }
    .el-dialog__footer {
      margin-top: 0;
      text-align: center;
      .el-button {
        padding: 0;
        margin-right: 20px;
        width: 80px;
        height: 36px;
      }
      .noBtn {
        border-color: #f3e7e1;
        background-color: #f3e7e1;
        color: #333;
      }
      .yesBtn {
        border-color: #ff5e20;
        background-color: #ff5e20;
      }
    }
  }
}
</style>
